<template>
	<div class="IndexSwiper">
		<h1>滚动广告</h1>
		<!--添加按钮-->
		<el-row class="addBtn clear_fix">
			<el-button class="addImg" type="primary" @click="dialogFormVisible = true">添加滚动广告</el-button>
		</el-row>
		
	<!--广告头部-->
	<el-table :data="tableData">
	    <el-table-column label="图片">
	      <template slot-scope="scope">
	        <span style="margin-left: 10px">
	        	<div class="indImg">{{scope.row.content}}</div>
	        </span>
	      </template>
	    </el-table-column>
	     <el-table-column label="链接" >
	      <template slot-scope="scope">
	        <p>{{scope.row.href}}</p>
	      </template>
	    </el-table-column>
	    <el-table-column label="操作">
	      <template class="el-table__row" slot-scope="scope">
	        <el-button
	          size="medium"
	          @click="handleUp(scope.$index, scope.row)">上升</el-button>
	        <el-button
	          size="medium"
	          @click="handleDown(scope.$index, scope.row)">下降</el-button>
	           <el-button
	          size="medium"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      		</template>
    </el-table-column>
  </el-table>
  
  <!--弹窗-->
	<el-dialog title="添加广告" :visible.sync="dialogFormVisible">
	<el-form   :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="urlBox">
					<el-form-item label="新闻标题"  prop="title">
							<el-input v-model="ruleForm.title"></el-input>
					</el-form-item>
					<el-form-item label="链接地址"  prop="href">
							<el-input v-model="ruleForm.href"></el-input>
					</el-form-item>
					<el-form-item> 
						<el-row>
								<el-button type="primary" @click="subBtn('ruleForm')">立即提交</el-button>
						</el-row>
					</el-form-item>
	 	 <!-- <div slot="footer" class="dialog-footer swiperBtn">
	    	
	  	</div> -->
		</el-form>
  </el-dialog>
  
</div>
</template>

<script>
	export default {
	    data() {
	      return {
			//表格数据
	        tableData: [],
        	dialogFormVisible: false,
        	
        	//新闻标题
	        input: '',
	        //链接地址
					input1: '',
					 //链接地址及规则
					ruleForm: {
						title: '',
						href:''
					},
					rules: {
						title: [{
								required: true, message: '请新闻标题', trigger: 'blur'
						}],
						href:[{
							required: true, message: '请链接地址', trigger: 'blur'
						}]
					},
				}
					
		  },
	     methods: {
				 	//提交成功
					succmsg(){
						this.$message({
							message: '提交成功',
							type: 'success'
						});
					},
						//失败提醒
					error(){
						this.$message({
							message: '提交失败',
							type: 'error'
						});
					},
	     	//操作按钮
	     	
	     	//上升
		      handleUp(index, row) {
		        this.$require.post(this.$config.sortAdver,{
		      		move:1,
		      		orders:row.orders
		      	})
		      	.then((res)=>{
		      		this.getList()
		      	})
		      },
		      //下降
		      handleDown(index, row) {
		         this.$require.post(this.$config.sortAdver,{
		      		move:-1,
		      		orders:row.orders
		      	})
		      	.then((res)=>{
		      		this.getList()
		      	})
		      },
		      
		      //删除
		      handleDelete(index, row) {
		      	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								
								}).then((res) => {
									
									this.$message({
										type: 'success',
										message: '删除成功!',
									});
									this.$require.post(this.$config.deladver,{
								      		id:row.id
								      	})
									.then((res)=>{
										this.getList()
										console.log(res)
									})
									
								})
								.catch(() => {
									this.$message({
										type: 'info',
										message: '已取消删除'
									})
									this.getList()
								});

		      	
		      	},
      
		       //请求数据
	      	 getList(){
	      	 	this.$require.get(this.$config1.adverList)
		    		.then((res)=>{
		    			this.tableData=res.data.data.rows
		    		})
		    		.catch((err)=>{
		    			console.log("请求失败")
		    		})
	      	 },
	      	 //提交
	      	 subBtn(formName){
						this.$refs[formName].validate((valid) => {
									if (valid) {
										this.succmsg();
										this.dialogFormVisible=false;
										this.$require.post(this.$config.adver,{
											content:this.ruleForm.title,
											href:this.ruleForm.href
										})
										.then((res)=>{
											this.$refs[formName].resetFields();
											this.getList()
										})
									}else {
										this.error();
										return false;
									}
								});

	      	 	
	      	 },
	      	 
		      
    	},
    	created(){
    		this.getList()
    	},
    	
   	}
</script>

<style lang="scss" scoped>
	.IndexSwiper{
		margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
	}
	.addBtn{
		margin-top: 20px;
	}
	.indImg{
		width:100px;
	}
	.addImg{
		float: left;
	}
	.selectType{
		float: right;
	}
	.el-dialog__title {
	    line-height: 30px;
	    font-size: 25px !important;
	    color: #303133;
	}
	.upload{
		width: 120px;
		display: inline-block;
		vertical-align: top;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
	}
	.upload:before{
	    content: "*";
	    color: #f56c6c;
	    margin-right: 4px;
	}
	.upload-demo{
		display: inline-block;
		margin-bottom: 40px;
	}
	.urlBox{
		// display: flex;
		// align-items: center;
		// align-content: space-between;
		margin-bottom: 20px;
	}
	.el-input{
		display: inline-block;
		width: 80%;
	}
	.swiperBtn {
		text-align: center ;
	}
</style>